<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form" :inline="true" :model="form" label-width="140px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="医院名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属分公司">
                            <el-select v-model="form.officeId" placeholder="请选择">
                                <el-option
                                v-for="item in officeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="医院标签">
                            <!-- <el-input v-model="form.tagsId"></el-input> -->
                            <el-select v-model="form.tagsId" placeholder="请选择">
                                <el-option
                                v-for="item in tagOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="app上架状态">
                            <el-select v-model="form.status" placeholder="请选择">
                                <el-option
                                v-for="item in statusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="app冻结状态">
                             <el-select v-model="form.isAppointed" placeholder="请选择">
                                <el-option
                                v-for="item in isAppointedOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="美学设计师上架状态">
                            <el-select v-model="form.minappAppoint" placeholder="请选择">
                                <el-option
                                v-for="item in minappAppointOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="美学设计师冻结状态">
                            <!-- <el-input v-model="form.minappStatus"></el-input> -->
                            <el-select v-model="form.minappStatus" placeholder="请选择">
                                <el-option
                                v-for="item in minappStatusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
                            <el-button style="margin-left:60px" @click="toRoutes('hospitalAdd')" type="primary">新增</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table
                :data="tableData"
                class="tableData"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="医院名称"
                >
                </el-table-column>
                <el-table-column
                    prop="projectCount"
                    label="项目数量"
                >
                </el-table-column>
                <el-table-column
                    prop="doctorCount"
                    label="医生数量"
                >
                </el-table-column>
                <el-table-column
                    prop="tags"
                    label="医院标签"
                >
                </el-table-column>
                <el-table-column
                    prop="appointmentNum"
                    label="每日可预约次数"
                >
                </el-table-column>
                <el-table-column
                    prop="office"
                    label="所属分公司"
                >
                </el-table-column>
                <el-table-column
                    prop="loan"
                    label="贷款平台"
                >
                </el-table-column>
                <el-table-column
                    prop="star"
                    label="评星"
                >
                </el-table-column>
                <el-table-column
                    prop="createdAt"
                    label="添加时间"
                >
                </el-table-column>
                <el-table-column
                    label="app上架状态"
                >
                    <template slot-scope="scope">
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.status"
                        @click.native="changeStatus(scope.row.id,'status',scope.row.status)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="0"
                        :inactive-value="1">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="app冻结状态"
                >
                    <template slot-scope="scope">
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.isAppoint"
                        @click.native="changeStatus(scope.row.id,'isAppoint',scope.row.isAppoint)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="1"
                        :inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="美学设计师上架状态"
                >
                    <template slot-scope="scope">
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.minappAppoint"
                        @click.native="changeStatus(scope.row.id,'minappAppoint',scope.row.minappAppoint)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="1"
                        :inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="美学设计师冻结状态"
                >
                    <template slot-scope="scope">
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.minappStatus"
                        @click.native="changeStatus(scope.row.id,'minappStatus',scope.row.minappStatus)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="0"
                        :inactive-value="1">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
                >
                <template slot-scope="scope">
                    <el-button type="text" @click="toRoutes('hospitalEdit',scope.row.id)" size="small">编辑</el-button>
                    <el-button type="text" @click="toRoutes('hospitalInfo',scope.row.id)" size="small">详情</el-button>
                    <el-button type="text" @click="deleteFn(scope.row.id)" size="small">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listForm.pageNum"
                    :page-sizes="page_sizes"
                    :page-size="listForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totals">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { hospitalList,deleteData,changeHospitalStatus } from '@/api/hospitalManage'
import { findHospitalTagsList } from '@/api/hospitalLabel'
import { companyList } from '@/api/branchOfficeDropDown'

export default {
    name:"hospitalIndex",
    data(){
        return{
            tableLoading:true,
            officeOption:[],
            tagOption:[],
            statusOption:[{
                    value: '0',
                    label: '正常'
                }, {
                    value: '1',
                    label: '停用'
                }
            ],
            isAppointedOption:[{
                    value: '0',
                    label: '不可预约'
                }, {
                    value: '1',
                    label: '可以预约'
                }
            ],
            minappAppointOption:[{
                    value: '0',
                    label: '未冻结'
                }, {
                    value: '1',
                    label: '冻结'
                }
            ],
            minappStatusOption:[{
                    value: '0',
                    label: '上架'
                }, {
                    value: '1',
                    label: '下架'
                }
            ],
            form:{
                name:"",
                officeId:"",
                tagsId:"",
                status:"",
                isAppointed:"",
                minappAppoint:"",
                minappStatus:"",
                pageNum:1,
                pageSize:10,
            },
            tableData: [],
            page_sizes:[10,30,50,100],
            page_totals:60,
            listForm:{
                pageNum: 1,
                pageSize:10
            },
        }
    },
    filters:{
        cardType: function(e){
            return window.helper.cardType(e)
        },
        // 0为未审核 1为审核通过  2为审核驳回
        RS:function(e){
            switch(e){
                case 0 :
                    return "未审核"
                case 1 :
                    return "审核通过"
                case 2 :
                    return "审核驳回"
                default:
                    return "暂无"
            }
        }
    },
    mounted(){
        //分公司列表
        this.getCompanyList()
        this.getList(this.listForm)
    },
    methods:{
        //上下架与状态修改
        changeStatus(id,type,status){
            let datas = {
                id:id+""
            }
            datas[type]=status+""
            changeHospitalStatus(datas).then(res =>{
                // console.log(res)
                if(res.data.code === 0){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }else{
                    this.$message.error('修改失败');
                }
            })
            console.log(datas)
        },
        //获取分公司列表
        getCompanyList(){
            companyList().then(res =>{
                let resData = res.data.data
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.name
                    })
                });
                this.officeOption = newData
            })
            .catch(error =>{
                this.$message.error(error);
            })
            //医院标签
            let datas={
                pageNum:0,
                pageSize:2000
            }
            findHospitalTagsList(datas).then(res=>{
                let resData = res.data.data.list
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.name
                    })
                });
                this.tagOption = newData
            })
        },
        //成功状态弹窗
        succStatus(txt){
            this.$message({
                message: txt+'成功',
                type: 'success'
            });
        },
        //失败状态弹窗
        errorStatus(txt){
            this.$message.error(txt+'失败');
        },
        //查询
        searchFn(){
            // console.log(this.form)
            this.form.officeId = this.form.officeId+""
            this.form.tagsId = this.form.tagsId+""
            this.getList(this.form)
        },
        // 路由跳转
        toRoutes(e,userId) {
            let route = {name:e,query:{userId:userId}}
            this.$router.push(route)
        },
        //列表数据获取
        getList(e){
            this.tableLoading = true
            let datas = e
            hospitalList(datas).then(res => {
                // console.log(res)
                if(!res.data.code){
                    // console.log(res)
                    this.tableData = res.data.data.list
                    this.page_totals = res.data.data.count
                    if(this.form.officeId !==""){
                        this.form.officeId = Number(this.form.officeId)
                    }
                    if(this.form.tagsId !==""){
                        this.form.tagsId = Number(this.form.tagsId)
                    }
                }else{
                    this.$message.error("数据接口访问失败");
                }
                this.tableLoading = false
            })
            .catch(error =>{
                this.$message.error(error);
            })
        },
        //删除
        deleteFn(e){
            let datas = {
                id:e
            }
            this.$confirm('删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteData(datas).then(res =>{
                    console.log(res)
                    if(!res.data.code){
                        this.succStatus("删除")
                        this.getList(this.form)
                    }else{
                        this.$message.error("数据接口访问失败");
                    }
                })
                .catch(error =>{
                    this.$message.error(error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //改变页面条数
        handleSizeChange(val) {
            this.form.pageSize = val
            this.getList(this.form)
        },
        //选择页数
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.getList(this.form)
        },
    }
}
</script>
<style scoped>
/* 分页 */
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
</style>
